<!DOCTYPE html>
<html>
<!--王艳辉-->
<head>
    <meta charset="utf-8">
    <title>班级管理</title>
    <link rel="stylesheet" type="text/css" href="plugin/layui/css/layui.css"/>
    <script src="plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="layui-container">
    <!--条件查询-->
    <blockquote class="layui-elem-quote quoteBox">
        <div class="layui-inline" style="text-align: center">

            <div class="layui-input-inline"><input type="text" id="condition-tname" name="title" required
                                                   lay-verify="required"
                                                   placeholder="班级名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline"><input type="text" id="condition-gname" required lay-verify="required"
                                                   placeholder="年级" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline"><input type="text" id="condition-teamType" required lay-verify="required"
                                                   placeholder="类型" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline"><input type="text" id="condition-selectYear" required lay-verify="required"
                                                   placeholder="年份" autocomplete="off" class="layui-input">
            </div>
            <a class="layui-btn search_btn" datatype="reload" id="conditionsearch">搜索</a>

        </div>
    </blockquote>

    <!--数据展示表格-->
    <div style="text-align: center">

        <!-- 表格 -->
        <table id="demo" lay-filter="test"></table>


        <button type="button" class="layui-btn" id="addclass">新增班级</button>
        <button type="button" class="layui-btn demoTable" id="dellist" data-type="getCheckData">批量删除</button>
    </div>


    <!-- 更新类型弹出层 -->
    <div id="update-class-layer" style="display: none; padding: 20px;margin-left: 100px">
        <form id="update-class-form" class="layui-form layui-form-pane" lay-filter="update-class-form">
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">id</label>
                <div class="layui-input-inline">
                    <input type="text" name="teId" id="techertid" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班级名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="tname" id="up_ctype_id" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班主任信息</label>
                <div class="layui-input-inline">
                    <select id="teachers" name="tmId" lay-verify="required" lay-search="">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年级信息</label>
                <div class="layui-input-inline">
                    <select lay-filter="aassss" id="classnum" name="gaId" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文理科</label>
                <div class="layui-input-inline">
                    <select lay-filter="updatteamType" id="updatteamType" name="teamType" lay-verify="required">
                        <option value="文科">文科</option>
                        <option value="理科">理科</option>
                        <option value="默认">默认</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最大人数</label>
                <div class="layui-input-inline">
                    <input type="text" name="maxnumber" id="sess_name" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">实际人数</label>
                <div class="layui-input-inline">
                    <input type="text" name="tnumber" id="se_name" class="layui-input" lay-verify="required" readonly>
                </div>
            </div>

            <!--            <div class="layui-form-item">-->
            <!--                <div class="layui-input-block">-->
            <!--                    <button class="layui-btn" lay-submit lay-filter="update-class-form-submit">提交</button>-->
            <!--                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            <!--                </div>-->
            <!--            </div>-->
        </form>
    </div>

</div>
<script type="text/html" id="aaa">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'laydate'], function () {
        // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节

        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var tableData = null;  //设置变量接收每次表格加载的数据

        laydate.render({
            elem: '#condition-selectYear',
            type: 'year'
        })
        //第一个实例
        table.render({
            elem: '#demo',
            height: 312,
            url: '/teamInfo/getall' //数据接口
            ,
            page: true //开启分页
            ,
            cols: [
                [ //表头
                    {
                        type: 'checkbox',
                        width: 80,
                        //sort: true,
                        //fixed: 'left'
                    },
                    {
                        field: 'teId',
                        title: 'ID',
                        width: 80,
                        sort: true,
                        //fixed: 'left'
                    }, {
                    field: 'tname',
                    title: '班级名称',
                    width: 160
                }, {
                    field: 'tnumber',
                    title: '班级人数',
                    width: 100,
                    sort: true
                }, {
                    field: 'teamType',
                    title: '班级类型',
                    width: 160
                },
                    {
                        field: 'tool_master',
                        title: '班主任',
                        width: 100,

                    }, {
                    field: 'tool_grade',
                    title: '年级',
                    width: 100,
                    // templet: function (d) {
                    //     return d.gradeInfo.gradeType;
                    // }
                    //sort: true
                },
                    {
                        field: 'maxnumber',
                        title: '班级最大人数',
                        width: 150,
                        sort: true
                    }
                    , {
                    toolbar: '#aaa', title: '操作',

                    width: 180
                },
                ]
            ],
            // 表格容器id，用于表格重载
            id: 'class-tbl',
            parseData: function (res) {
                //解析返回值新增虚拟字段
                res.data = res.data.map(
                    function (d) {
                        d['tool_master'] = d.teamMaster.teacherInfo.name;
                        d['tool_grade'] = d.gradeInfo.gradeType;
                        return d;
                    });
                return res;
            },
            done: function (res, curr, count) {
                tableData = res.data;//返回结果封装的数据集保存到变量中
            }
        });

        //监听复选框
        //table.on('checkbox(test)', function(obj){
        //console.log(obj)
        //});

        //点击添加班级,layer弹出框
        $("#addclass").click(
            function () {
                var index = layer.open({
                    type: 2,
                    title: ['新增班级信息', 'text-align:center;font-size:20px;'],
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['600px', '430px'],
                    offset: '0px',
                    //通过url传递参数到order_view界面
                    content: "addclass.html",
                });
            }
        );

        //按条件查询，表格的重载
        $("#conditionsearch").click(function () {

            table.reload("class-tbl", {
                url: "/teamInfo/getByCondition",
                where: {
                    tname: $("#condition-tname").val()
                    , gname: $("#condition-gname").val()
                    , teamType: $("#condition-teamType").val()
                    , selectYear: $("#condition-selectYear").val(),
                },
                done: function (res, curr, count) {
                    tableData = res.data;//返回结果封装的数据集保存到变量中
                }
            })
        })


        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            //var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            //$.post("",)

            if (layEvent === 'del') { //删除
                layer.confirm('确定删除本条记录吗', function (index) {
                    //向服务端发送删除指令

                    $.post("/teamInfo/delByTeid",{"teId":obj.data.teId},function (res) {
                    if (res.code==200){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                    }
                      layer.msg(res.message) ;
                    })




                });
            } else if (layEvent === 'edit') { //编辑

                form.val('update-class-form', {
                    "tname": data.tname,
                    "teamType": data.teamType,
                    "maxnumber": data.maxnumber,
                    "tnumber": data.tnumber,
                    "teId": data.teId
                    //"tmId": data.teamMaster.teacherInfo.name,
                    //"gaId": data.gradeInfo.gradeType,
                });
                $("#classnum").empty();//清空班级下拉框
                $("#teachers").empty();//清空年级下拉框
                //年级选项设置
                $.ajax({
                    url: '/gradeInfo/getall',   //后台数据地址
                    success: function (resdata) {

                        var res=resdata.data;
                        $.each(res, function (index, item) {   //循环后台返回的json数据

                            //如果是当前班级给选中
                            if (item.gaId == data.gradeInfo.gaId) {
                                $("#classnum").append("<option value=" + res[index].gaId + " selected>" + res[index].gradeType + "</option>");
                            } else {
                                $("#classnum").append("<option value=" + res[index].gaId + ">" + res[index].gradeType + "</option>");
                            }


                            //new Option方法是新建一个option，第一个参数是需要显示的值，第二个参数是option的value值,然后append到下拉框中。
                            // $('#classnum').append(new Option(item.gradeType, item.gaId));
                        })
                        layui.form.render("select"); //更新所有select标签的状态
                    }
                })
                //班主任选项设置
                $.ajax({
                    url: '/teacher/getall',   //后台数据地址
                    success: function (resdata) {
                        //alert("获取所有老师信息成功！");
                        var res=resdata.data;
                        //console.info(res);
                        $.each(res, function (index, item) {   //循环后台返回的json数据

                            //如果是当前老师给选中
                            if (item.tcId == data.teamMaster.teacherInfo.tcId) {
                                $("#teachers").append("<option value=" + res[index].tcId + " selected>" + res[index].name + "</option>");
                            } else {
                                $("#teachers").append("<option value=" + res[index].tcId + ">" + res[index].name + "</option>");
                            }

                            //new Option方法是新建一个option，第一个参数是需要显示的值，第二个参数是option的value值,然后append到下拉框中。
                            // $('#teachers').append(new Option(item.name, item.tcId));
                        })
                        layui.form.render("select"); //更新所有select标签的状态

                    }
                })

                //设置当前选中文理科选项
                $("#updatteamType").val(data.teamType);

                //console.info(data);
                //打开班级修改弹出层
                layer.open({
                    type: 1,
                    title: ['修改班级信息', 'text-align:center;font-size:20px;'],
                    skin: 'layui-layer-molv',
                    area: ['550px', '450px'],
                    content: $('#update-class-layer'),
                    btn: ["修改", "取消"],
                    btnAlign: 'c',//居中
                    yes: function (index, layero) {  //点击修改后执行的操作
                        $.post("/teamInfo/updateTeamInfo", $("#update-class-form").serialize(), function (res) {
                            if (res.code == 200) {
                                //更新虚拟字段数据
                                obj.update({
                                        tool_master: res.data.teamMaster.teacherInfo.name,
                                        tool_grade: res.data.gradeInfo.gradeType,
                                    }
                                );
                                obj.update(res.data);//更新缓存所有数据
                                //console.info(obj);
                                // alert(res.data.teamMaster.teacherInfo.name);
                                layer.close(layer.index);//关闭弹框
                                layer.msg(res.message);
                                //更新行数据
                                //table.reload('class-tbl');//表格重载
                            }
                            layer.msg(res.message);
                        }, "json");
                    }
                });

                //同步更新缓存对应的值
                //obj.update({
                //    username: '123'
                //  , title: 'xxx'
                //});
            }
        });
        //批量删除
        //选中项数组id
        var checkedArr = [];
        var temp = [];//选择的班级信息
        //点击批量删除后
        $('.demoTable').on('click', function () {
            //layer.msg("点击了批量删除！！！");
            checkedArr = []; //数组重置为空
            temp = [];

            $(".laytable-cell-checkbox").each(function (i, item) {

                //item对象中有两个元素，一个是checkbox，一个是包含选中与否的样式的div
                if ($(item).find(".layui-form-checked").length > 0) {
                    //如果选中了所有项
                    if(i==0){//第一行不读取，为all所在行的行元素

                    }else {
                        //该行是选中状态，根据索引i到tableData数组中找相应行的数据
                        checkedArr.push(tableData[i-1].teId);//选中项添加到数组中！

                        temp.push(tableData[i-1].tname);
                    }

                }
                ;
            });
            if (checkedArr.length == 0) {
                layer.msg("请选中后再点击！");
            }
            //发送请求删除数据
            //alert(checkedArr);
            console.log(checkedArr);
            // $.post("/teamInfo/delBatch",JSON.stringify(checkedArr),function () {
            //     alert("发送了删除请求");
            // })
            $.ajax({
                type: 'POST',
                url: "/teamInfo/delBatch",
                contentType: "application/json",
                data: JSON.stringify(checkedArr),
                success: function (data) {//发送成功回调函数

                    if (data.code == 200) {
                        table.reload('class-tbl');//表格重载
                    }
                    layer.msg(JSON.stringify(temp) + "删除" + data.message);//消息提示

                }

            });

            //alert(JSON.stringify(checkedArr));
        });


        // table.on('checkbox(test)', function (obj) {
        //     console.log(obj);
        // if (obj.type == 'all' && obj.checked) {
        //  layer.msg("选中了所有");
        // }

        //获取所有的选中项    函数失效--可能是环境问题
        // var checkStatus = table.checkStatus('demo'),
        // data = checkStatus.data;
        //layer.msg(data.length);
        // });


        //批量删除
        // var  active = {
        //      getCheckData: function(){ //获取选中数据
        //
        //          //进入了选择数据获取
        //          layer.msg("数据获取中！！！");
        //          var checkStatus = table.checkStatus('demo');//方法获取不到数据
        //
        //          var checkData = checkStatus.data;
        //          var  delList=[];
        //          console.log(checkStatus);
        //          console.log(checkData);
        //
        //          for (var i = 0; i < checkData.length; i++) {
        //              delList.push(checkData[i].teId);
        //          }
        //          var strify = JSON.stringify(delList);
        //          console.log(strify);
        // $.ajax({
        //     url:"../../ClassesDeleteBatchServlet",
        //     dataType:'json',
        //     data:{
        //         datas:strify
        //     },
        //     type:'post',
        //     success:function(data){
        //         if (data == 0) {
        //             layer.msg('删除失败！',{icon:5,offset:"auto",time:2000});//提示框
        //         }else{
        //             layer.msg('删除成功！',{icon:6,offset:"auto",time:2000});//提示框
        //         }
        //
        //         setTimeout(function(){
        //             location.reload();//重新加载页面表格
        //         }, 2100);
        //     }
        // })
        //     }
        // };
        //监听点击
        // $('.demoTable').on('click', function(){
        //     //layer.msg("点击了批量删除！！！");
        //     var type = $(this).data('type');//获取选中按钮的data-type,
        //     active[type] ? active[type].call(this) : '';//找到与之对应的方法调用
        // });
        //监听表格复选框选择
        // table.on('checkbox(table1)', function(obj){
        //     console.log(obj);
        // })


        //弃用表单监听
        // form.on('submit(update-class-form-submit)', function (d) {
        //    // alert("执行了当前");
        //     console.log(d.field);
        //     //layer.msg(JSON.stringify(d.field));
        //     $.post("/teamInfo/updateTeamInfo", d.field, function (res) {
        //         if (res.code==200) {
        //             layer.close(layer.index);//关闭弹框
        //             layer.msg(res.message);
        //             table.reload('class-tbl');//表格重载
        //
        //         }
        //         layer.msg(res.message);
        //     },"json");
        //
        //     return false;//不提交表单
        // });
    });

</script>
</body>
</html>
